<template>
  <div class="club_content">
    <n-spin :show="loading">
      <n-flex class="back_box" align="center">
        <span class="back_icon button" @click="router.go(-1)">
          <iconpark-icon icon-id="fangxiangicon04" color="#9497A1"
                         size="1.5rem"></iconpark-icon>
        </span>
        <span>{{ clubInfoData.club_name }}</span>
      </n-flex>
      <n-flex class="top_bg">
        <n-flex justify="center" class="item_list_l">
          <Imgt :src="returnClubLogo(clubInfoData.club_logo)" />
        </n-flex>
        <n-flex class="item_list_r">
          <n-flex class="item_top">
            {{ clubInfoData.club_name }}
            <n-flex v-if="clubInfoData.is_creator" align="center" justify="center" class="button button_color" @click="showAdminInfo">
              管理
            </n-flex>
          </n-flex>
          <div class="txt_dec">
            <div>俱乐部简介:</div>
            <div class="txt_con">
              {{ clubInfoData.club_introduction }}
            </div>
          </div>
          <n-flex align="center" class="item_bottom">
            <span class="icon"><iconpark-icon size=".84rem" name="paihiconss01" color="#b5a4ff"></iconpark-icon></span>
            <span>{{ clubInfoData.totalmember }}</span>
          </n-flex>
        </n-flex>
      </n-flex>
      <div class="top_banner">
        <Imgt :src="`/img/club/new/banner1.webp`" />
      </div>
      <n-flex class="club_list_tab" align="center">
        <div :class="`btn_type ${curGmaeType === item.key ? 'active' : ''}`"
             v-for="(item, index) in curGmaeArr"
             :key="index" @click="clickTabGame(item.key)">
          <Imgt :src="`/img/club/new/game${index + 1}.webp`" />
          <div>
            {{ item.title }}
          </div>
        </div>
      </n-flex>

      <n-flex class="top_box">
        <n-flex class="item_list item_list_next button" v-for="(item, index) in listData"
                :style="{ 'background-image': `url(/img/club/new/bgn${index + 1}.webp)` }"
                :key="index" @click="goToPage(item)">
          <n-flex align="flex-end" justify="center" class="item_list_l">
            <iconpark-icon :icon-id="item.icon" color="#fff" size="2.143em"></iconpark-icon>
          </n-flex>
          <n-flex justify="center" class="item_list_l">
            {{ t(item.label) }}
          </n-flex>
        </n-flex>
      </n-flex>

      <div class="bottom_box">
        <n-flex align="center" justify="space-between">
          <n-flex class="tab_list">
            <n-flex align="center" :class="`item_list button ${curTab === item.value && 'active'}`"
                    v-for="(item, index) in tabData" :key="index" @click="clickTab(item.value)">
              <span class="txt"> {{ t(item.label) }} </span>
            </n-flex>
          </n-flex>
          <n-flex justify="center" align="center" class="tab_right button button_color">
            <span class="icon"> </span>
            <span>筛选 </span>
          </n-flex>
        </n-flex>

        <!-- 经典 -->
        <n-flex v-show="curTab === 'joinClub'" class="join_club_box">
          <n-flex align="center" class="item_list" v-for="(item, index) in gameListData" :key="index">
            <div class="bg_txt">
              <div>JOINED</div>
              <div>GAME</div>
            </div>
            <n-flex justify="center" class="item_list_l">
              <Imgt :src="`/img/club/new/image.webp`" />
            </n-flex>
            <n-flex class="item_list_r">
              <div>{{ t(item.name) }}</div>
              <n-flex class="txt_dec">
                <n-flex class="item_bb">
                  <span class="icon">
                    <iconpark-icon size="1.042rem" name="paihiconss01"></iconpark-icon>
                  </span>
                  <span>{{ item.count }}</span>
                </n-flex>
                <n-flex class="item_bb">
                  <span class="icon">
                    <Imgt :src="`/img/club/new/bankIcon.webp`" />
                  </span>
                  <span>{{ item.minBet }}</span>
                </n-flex>
                <n-flex class="item_bb">
                  <span class="icon">
                    <Imgt :src="`/img/club/new/monIcon.webp`" />
                  </span>
                  <span>{{ item.rate }}</span>
                </n-flex>
              </n-flex>
            </n-flex>
          </n-flex>
        </n-flex>
        <!-- 6+ -->
        <n-flex v-show="curTab === 'joinPlay'" class="join_club_box">
          <n-flex align="center" class="item_list" v-for="(item, index) in gameListData" :key="index">
            <div class="bg_txt">
              <div>JOINED</div>
              <div>GAME</div>
            </div>
            <n-flex justify="center" class="item_list_l">
              <Imgt :src="`/img/club/new/image.webp`" />
            </n-flex>
            <n-flex class="item_list_r">
              <div>{{ t(item.name) }}</div>
              <n-flex class="txt_dec">
                <n-flex class="item_bb">
                  <span class="icon">
                    <iconpark-icon size="1.042rem" name="paihiconss01"></iconpark-icon>
                  </span>
                  <span>{{ item.count }}</span>
                </n-flex>
                <n-flex class="item_bb">
                  <span class="icon">
                    <Imgt :src="`/img/club/new/bankIcon.webp`" />
                  </span>
                  <span>{{ item.minBet }}</span>
                </n-flex>
                <n-flex class="item_bb">
                  <span class="icon">
                    <Imgt :src="`/img/club/new/monIcon.webp`" />
                  </span>
                  <span>{{ item.rate }}</span>
                </n-flex>
              </n-flex>
            </n-flex>
          </n-flex>
        </n-flex>

        <!-- 赛事+ -->
        <n-flex v-show="curTab === 'event'" class="join_club_box">
          <n-flex align="center" class="item_list" v-for="(item, index) in eventListData"
                  :key="index">
            <div class="bg_txt">
              <div>JOINED</div>
              <div>GAME</div>
            </div>
            <n-flex justify="center" class="item_list_l">
              <Imgt :src="`/img/club/new/image.webp`" />
            </n-flex>
            <n-flex class="item_list_r">
              <div>{{ t(item.name) }}</div>
              <div class="txt_dec">
                <n-flex class="item_bb">
                  <span class="icon">
                    <iconpark-icon size="1.042rem" name="paihiconss01"></iconpark-icon>
                  </span>
                  <span>{{ t('报名人数') }}: {{ item.num }}</span>
                </n-flex>
                <n-flex class="time_box">
                  <div class="it_left">
                    <n-flex class="item_bb size_12">
                      <span class="icon">
                        <Imgt :src="`/img/club/new/bankIcon.webp`" />
                      </span>
                      <span>{{ t('开始时间') }}: {{ item.startTime }}</span>
                    </n-flex>
                    <n-flex class="item_bb size_12">
                      <span class="icon">
                        <Imgt :src="`/img/club/new/monIcon.webp`" />
                      </span>
                      <span>{{ t('结束时间') }}: {{ item.endTime }}</span>
                    </n-flex>
                  </div>
                  <n-flex align="center" justify="center" class="it_right button button_color">
                    报名
                  </n-flex>
                </n-flex>

              </div>
            </n-flex>
          </n-flex>
        </n-flex>

      </div>
    </n-spin>

    <!-- 管理员信息 -->
    <adminInfo v-model:visible="adminShow" @getClubInfo="searchClub" :clubInfoData="clubInfoData"/>

  </div>

</template>

<script setup lang='ts'>
import { onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import Imgt from '@/components/Imgt.vue';
import { NetPacket } from '@/netBase/NetPacket';
import H5Websocket from '@/net/Net1';
import { MessageEvent2 } from '@/net/MessageEvent2.ts';
import { NetMsgType } from '@/netBase/NetMsgType.ts';
// import { Message } from '@/utils/discreteApi.ts';
import { returnClubLogo } from '@/utils/publicMethods.ts';
// import { User } from '@/store/user.ts';
import { useRoute, useRouter } from 'vue-router';
import adminInfo from './components/adminInfo.vue';
import { returnAvatarUrl } from '@/utils/others.ts';

const route = useRoute();
const router = useRouter();
// const UserStore = User(pinia);
// const { roleInfo } = storeToRefs(UserStore);
const { t } = useI18n();
const curTitle = ref('俱乐部');
const curTab = ref('joinClub'); // joinClub, joinPlay
const clubInfoData: any = ref({}); // 俱乐部信息
const loading = ref(false);
const adminShow = ref(false);

const tabData = ref([
  { label: '经典', value: 'joinClub', icon: 'icon_club' },
  { label: '6+', value: 'joinPlay', icon: 'icon_game' },
  { label: '赛事', value: 'event', icon: 'icon_game' },
]);
const listData = ref([
  { label: '新建牌局', value: 'joinPlay', icon: 'jlbiconcjjub' },
  { label: '快速开始', value: 'start', icon: 'jlbiconjhqs04' },
]);
const curGmaeType = ref('dz');
const curGmaeArr = [
  { title: '德州PK', key: 'dz' },
  { title: '跑得快', key: 'pdk' },
  { title: '21点', key: '21' },
  { title: '骰子', key: 'tz' },
  { title: '黑杰克', key: 'jack' },
  { title: '百人游戏', key: 'bai' },
];
// 我加入的牌局
const gameListData = ref(
  [
    {
      name: '经典德州-1860',
      type: '【美元桌】',
      minBet: 25,
      icon: 'avatar',
      rate: '0.25/0.50',
      count: '3/8',
    },
    {
      name: '经典德州-1860',
      type: '【美元桌】',
      minBet: 25,
      icon: 'avatar',
      rate: '0.25/0.50',
      count: '3/8',
    },
    {
      name: '经典德州-1860',
      type: '【美元桌】',
      minBet: 25,
      icon: 'avatar',
      rate: '0.25/0.50',
      count: '3/8',
    },
    {
      name: '经典德州-1860',
      type: '【美元桌】',
      minBet: 25,
      icon: 'avatar',
      rate: '0.25/0.50',
      count: '3/8',
    },
    {
      name: '经典德州-1860',
      type: '【美元桌】',
      minBet: 25,
      icon: 'avatar',
      rate: '0.25/0.50',
      count: '3/8',
    },
  ],
);
// 赛事列表
const eventListData = ref(
  [
    {
      name: '德州比赛-多人奖金赛',
      num: 25,
      startTime: '2024-07-01 12:30:00',
      endTime: '2024-09-01 12:30:00',
    },
    {
      name: '德州比赛-多人奖金赛',
      num: 25,
      startTime: '2024-07-01 12:30:00',
      endTime: '2024-09-01 12:30:00',
    },
    {
      name: '德州比赛-多人奖金赛',
      num: 25,
      startTime: '2024-07-01 12:30:00',
      endTime: '2024-09-01 12:30:00',
    },
    {
      name: '德州比赛-多人奖金赛',
      num: 25,
      startTime: '2024-07-01 12:30:00',
      endTime: '2024-09-01 12:30:00',
    },
  ],
);

const showAdminInfo = () => {
  adminShow.value = true;
  searchClub();
}
const clickTabGame = (e: any) => {
  curGmaeType.value = e;
};

const goToPage = (item: any) => {
  if (item.value === 'create') {

  }
};

const clickTab = (e: any) => {
  curTab.value = e;
  curTitle.value = e === 'joinClub' ? t('club_page_club') : t('club_page_ycj');
};

// 搜索俱乐部, 获取俱乐部信息，加入俱乐部前需要查询是否存在
const searchClub = () => {
  loading.value = true
  const req: any = NetPacket.req_get_club_info();
  req.club_id = route.query?.club_id || '';
  H5Websocket.sendMessageHandler(req);
};
// 监听创建俱乐部信息，返回结果：club_id：俱乐部ID； club_logo：俱乐部logo； club_name：俱乐部名称；club_introduction：俱乐部简介；
// is_official：是否官方俱乐部，0为非官方，1为官方；is_admin：是否是俱乐部管理员，0为普通会员，1为管理员； is_creator：是否是俱乐部创建者，0为非创建者，1为创建者；
// totalmember：俱乐部成员人数； userinfo：俱乐部成员的信息； gamelist：俱乐部拥有的游戏列表
const getClubInfoHandle = (res: any) => {
  setTimeout(() => {
    loading.value = false
  }, 500)
  // 拼接成员头像
  res.userinfo.forEach((item: any) => {
    item.head_photo_url = returnAvatarUrl(item.head_photo)
  })
  clubInfoData.value = res;
  console.log('俱乐部信息-----', res)
};

// watch(
//   () => route.params.openType,
//   (n) => {
//     // getClubList();
//     curTab.value = n;
//     curTitle.value = n === 'club' ? t('club_page_club') : t('club_page_ycj');
//   },
//   {
//     deep: true,
//   },
// );

onUnmounted(() => {
  // 取消监听
  // MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_create_club, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_get_club_info, null);
});
onMounted(() => {
  searchClub();
  // MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_create_club, createClubHandle);
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_get_club_info, getClubInfoHandle);
});

</script>

<style lang='less' scoped>
@timestamp: `new Date().getTime()`;
@import '@/assets/club.less';

.top_bg {
  margin: 16px 0;
  padding: 35px 32px;
  width: 1400px;
  height: 218px;
  background: url('/img/club/new/topBg.webp?t=@{timestamp}') center no-repeat;
  background-size: 100%;
  gap: 17px !important;

  .item_list_l {
    img {
      border-radius: 50%;
      width: 148px;
      height: 148px;
    }
  }

  .item_list_r {
    flex: 1;

    > div {
      width: 100%;
      font-size: 20px;
      font-weight: 600;
    }

    .item_top {
      .button {
        width: 96px;
        height: 36px;
        border-radius: 8px;
        font-size: 16px;
      }
    }

    .txt_dec {
      width: 656px;
      font-size: 14px;
      color: rgba(175, 182, 189, 1);

      .txt_con {
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }

    .item_bottom {
      gap: 2px !important;
      font-size: 14px;
      color: rgba(181, 164, 255, 1);

      .icon {
        width: 16px;
        height: 16px;
      }
    }
  }
}

.top_banner {
  margin-bottom: 20px;

  img {
    width: 100%;
  }
}

.club_list_tab {
  background: linear-gradient(180deg, #0A0B22 0%, #000000 100%);
  border: 1px solid #000;
  border-radius: 16px;
  padding: 24px 48px;
  gap: 40px !important;
  margin-bottom: 20px;

  .btn_type {
    font-size: 16px;
    text-align: center;

    img {
      width: 128px;
    }
  }
}

.top_box {
  gap: 24px !important;
}
</style>
